
<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="基础设置"></el-step>
      <el-step title="评估表单设计"></el-step>
    </el-steps>
    <!--   基本信息 -->
    <el-form
      v-if="active == 0"
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="编码" prop="number">
        <el-input v-model="ruleForm.number"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="评分分制" prop="scoresystem">
        <el-input v-model="ruleForm.scoresystem"></el-input>
      </el-form-item>
      <el-form-item label="总评等级" prop="sumperflevel">
        <el-input v-model="ruleForm.sumperflevel"></el-input>
      </el-form-item>
      <el-form-item label="得分计算方式" prop="scorecalcway">
        <el-input v-model="ruleForm.scorecalcway"></el-input>
      </el-form-item>
    </el-form>

    <!--  评估表单设计  -->

    <div v-if="active == 1">
      <!-- <h1>这是评估表单的设计，包括区域，区域字段的设计</h1>
  
        <el-table   style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address"  label="地址"> </el-table-column>
        </el-table> -->
      <!-- <el-button @click="addColumn">添加列</el-button> -->
      <h3>常规指标区</h3>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
        >
        </el-table-column>
      </el-table>

      <h3>加减分区</h3>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          v-for="column in pncolumns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
        >
        </el-table-column>
      </el-table>
    </div>

    <div>
   
      <el-button style="margin-top: 12px" @click="next">下一步</el-button>
    </div>
  </div>
</template>
  <script>
export default {
  name: "AddUAssessForm",

  data() {
    return {
      // 常规指标区
      columns: [
        { prop: "name", label: "名称", width: "180" },
        { prop: "score", label: "分值", width: "180" },
        { prop: "evaltype", label: "评分方式", width: "180" },
        { prop: "evaldescription", label: "评估说明", width: "180" },
        { prop: "indicatordescription", label: "指标说明", width: "180" },
        // 初始列配置
      ],
      // 加减分区
      pncolumns: [
        { prop: "name", label: "名称", width: "180" },
        { prop: "score", label: "分值", width: "180" },
        { prop: "evaltype", label: "评分方式", width: "180" },
        { prop: "indicatordescription", label: "指标说明", width: "180" },
        // 初始列配置
      ],
      tableData: [
        // 表格数据
      ],
      ruleForm: {
        name: "",
        number: "",
        scoresystem: "",
        sumperflevel: "",
        scorecalcway: "",
      },
     
      active: 0,
    };
  },
  methods: {
    addColumn() {
      // 假设我们要添加的列是动态确定的
      const newColumn = { prop: "address", label: "地址", width: "200" };
      // 将新列添加到 columns 数组中
      this.columns.push(newColumn);
    },
    submitForm2P: function () {
      debugger;
      this.$emit("handleChildEvent", false);
    },

    submitForm: function () {
      debugger;
      this.$emit("handleChildEvent", false);
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
  },
};
</script>